<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="6">
                <el-card class="box-card">
                    <!-- 第一个card -->
                    <Detail title="总销售额" count="￥ 12345">
                        <template slot="charts">
                            <span class="icon1">周同比&nbsp;56.67% <svg t="1653485544711" class="icon svg1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4040" width="32" height="32"><path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#1afa29" p-id="4041"></path></svg></span>
                            <span class="icon2">日同比&nbsp;19.96% <svg t="1653486946844" class="icon svg2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5648" width="32" height="32"><path d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z" fill="#d81e06" p-id="5649"></path></svg></span>
                        </template>
                        <template slot="footer">
                            <span>日销售额 ￥12345</span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card class="box-card">
                    <!-- 第二个card -->
                    <Detail title="访问量" count="88460">
                        <template slot="charts">
                            <lineChart/>
                        </template>
                        <template slot="footer">
                            <span>日访问量 12345</span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card class="box-card">
                    <!-- 第三个card -->
                    <Detail title="支付笔数" count="88460">
                        <template slot="charts">
                            <barChart/>
                        </template>
                        <template slot="footer">
                            <span>转化率 45%</span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card class="box-card">
                    <!-- 第四个card -->
                    <Detail title="运行活动效果" count="78%">
                        <template slot="charts">
                            <progressChart/>
                        </template>
                        <template slot="footer">
                            <span class="icon1">周同比&nbsp;56.67% <svg t="1653485544711" class="icon svg1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4040" width="32" height="32"><path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#1afa29" p-id="4041"></path></svg></span>
                            <span class="icon2">日同比&nbsp;19.96% <svg t="1653486946844" class="icon svg2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5648" width="32" height="32"><path d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z" fill="#d81e06" p-id="5649"></path></svg></span>
                            <!--<span>11</span>-->
                        </template>
                    </Detail>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Detail from "@/views/dashboard/card/detail/Detail";
// 引入折线图组件
import lineChart from '@/views/dashboard/card/lineChart/LineChart'
// 引入柱状图组件
import barChart from '@/views/dashboard/card/barChart/BarChart'
// 引入进度条组件
import progressChart from '@/views/dashboard/card/progressChart/ProgressChart'


export default {
    name: "Card",
    components: {
        Detail,lineChart,barChart,progressChart
    }
}
</script>

<style scoped>

</style>
